<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>物品列表 - 归物</title>

    <!-- 网站图标 -->
    <link rel="icon" type="image/png" href="/icon.png">
    <link rel="shortcut icon" type="image/png" href="/icon.png">
    <link rel="apple-touch-icon" href="/icon.png">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .main-container {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            backdrop-filter: blur(10px);
            margin: 20px auto;
            max-width: 1200px;
        }
        .header-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 20px 20px 0 0;
            padding: 30px;
        }
        .stats-card {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 15px;
            padding: 20px;
            text-align: center;
            backdrop-filter: blur(10px);
        }
        .stats-number {
            font-size: 2rem;
            font-weight: bold;
            word-break: break-all;
            overflow-wrap: break-word;
        }

        /* 移动端适配 */
        @media (max-width: 576px) {
            .stats-number {
                font-size: 1.2rem;
            }
            .stats-card {
                padding: 15px 10px;
            }
            .header-section {
                padding: 20px 15px;
            }
            .main-container {
                margin: 10px;
                border-radius: 15px;
            }
            .search-section {
                padding: 15px;
            }
        }

        @media (max-width: 400px) {
            .stats-number {
                font-size: 1rem;
            }
            .stats-card {
                padding: 10px 5px;
            }
            .card-title {
                font-size: 0.9rem;
            }
            .price-text {
                font-size: 0.9rem;
            }
        }

        /* 确保价格文本不会溢出 */
        .price-text {
            word-break: break-all;
            overflow-wrap: break-word;
        }
        .item-card {
            border-left: 4px solid #007bff;
        }
        .category-badge {
            font-size: 0.8rem;
        }
        .price-text {
            color: #28a745;
            font-weight: bold;
        }
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #6c757d;
        }
        .empty-state i {
            font-size: 4rem;
            margin-bottom: 20px;
            opacity: 0.5;
        }
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            border-top: 1px solid #dee2e6;
            padding: 10px 0;
            z-index: 1000;
        }
        .nav-item {
            text-align: center;
            color: #6c757d;
            text-decoration: none;
            flex: 1;
            padding: 10px;
        }
        .nav-item.active {
            color: #007bff;
        }
        .nav-item i {
            display: block;
            font-size: 1.2rem;
            margin-bottom: 5px;
        }
        .nav-item span {
            font-size: 0.8rem;
        }
        .search-section {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="main-container">
            <!-- 头部统计信息 -->
            <div class="header-section">
                <div class="row text-center">
                    <div class="col-6">
                        <div class="stats-card">
                            <div class="stats-number" th:text="'¥' + ${totalAssets}">¥0.00</div>
                            <div>总资产</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="stats-card">
                            <div class="stats-number" th:text="'¥' + ${averageDailyPrice}">¥0.00</div>
                            <div>日均价格</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 内容区域 -->
            <div class="p-4">
                <!-- 搜索和筛选区域 -->
                <div class="search-section">
                    <!-- 搜索框 -->
                    <form method="get" action="/items" class="mb-3">
                        <div class="input-group">
                            <input type="text" class="form-control" name="search" 
                                   th:value="${searchKeyword}" placeholder="搜索物品名称...">
                            <button class="btn btn-outline-primary" type="submit">
                                <i class="fas fa-search"></i> 搜索
                            </button>
                        </div>
                    </form>

                    <!-- 分类筛选 -->
                    <div class="btn-group" role="group">
                        <a href="/items" class="btn btn-outline-primary" 
                           th:classappend="${selectedCategory == null} ? 'active' : ''">全部</a>
                        <a th:each="category : ${categories}" 
                           th:href="@{/items(categoryId=${category.id})}"
                           class="btn btn-outline-primary"
                           th:classappend="${selectedCategory != null && selectedCategory == category.id} ? 'active' : ''"
                           th:text="${category.name}">分类</a>
                    </div>
                </div>

                <!-- 成功消息 -->
                <div th:if="${successMessage}" class="alert alert-success alert-dismissible fade show" role="alert">
                    <i class="fas fa-check-circle me-2"></i>
                    <span th:text="${successMessage}"></span>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>

                <!-- 错误消息 -->
                <div th:if="${errorMessage}" class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i class="fas fa-exclamation-circle me-2"></i>
                    <span th:text="${errorMessage}"></span>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>

                <!-- 物品列表 -->
                <div th:if="${#lists.isEmpty(items)}" class="empty-state">
                    <i class="fas fa-box-open"></i>
                    <h4>暂无物品</h4>
                    <p th:if="${searchKeyword != null}">没有找到包含 "<span th:text="${searchKeyword}"></span>" 的物品</p>
                    <p th:if="${selectedCategory != null}">该分类下暂无物品</p>
                    <p th:if="${searchKeyword == null && selectedCategory == null}">您还没有添加任何物品，点击下方"添加"按钮开始记录您的物品吧！</p>
                    <a href="/item/add" class="btn btn-primary">
                        <i class="fas fa-plus"></i> 添加物品
                    </a>
                </div>

                <div th:if="${!#lists.isEmpty(items)}" class="row">
                    <div th:each="item : ${items}" class="col-md-6 col-lg-4 mb-3">
                        <div class="card item-card h-100">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <h6 class="card-title mb-0" th:text="${item.name}">物品名称</h6>
                                    <span class="badge bg-primary category-badge" th:text="${item.category}">分类</span>
                                </div>
                                
                                <p class="card-text text-muted" th:if="${item.description}" th:text="${item.description}">描述</p>
                                
                                <div class="row text-center">
                                    <div class="col-6">
                                        <div class="price-text" th:text="'¥' + ${item.price}">¥0.00</div>
                                        <small class="text-muted">价格</small>
                                    </div>
                                    <div class="col-6">
                                        <div th:text="${item.usageDays} + '天'">0天</div>
                                        <small class="text-muted">使用时间</small>
                                    </div>
                                </div>
                                
                                <div class="mt-2 text-center">
                                    <small class="text-danger">
                                        日均: ¥<span th:text="${item.dailyPrice}">0.00</span>
                                    </small>
                                </div>
                                
                                <div class="mt-2">
                                    <small class="text-muted">
                                        <i class="fas fa-calendar-alt"></i> 
                                        入手时间: <span th:text="${#temporals.format(item.purchaseDate, 'yyyy-MM-dd')}">2022-01-01</span>
                                    </small>
                                </div>
                            </div>
                            
                            <div class="card-footer bg-transparent">
                                <div class="btn-group w-100" role="group">
                                    <a th:href="@{/item/edit/{id}(id=${item.id})}" class="btn btn-outline-primary btn-sm">
                                        <i class="fas fa-edit"></i> 编辑
                                    </a>
                                    <button type="button" class="btn btn-outline-danger btn-sm" 
                                            th:onclick="'deleteItem(' + ${item.id} + ')'">
                                        <i class="fas fa-trash"></i> 删除
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部导航 -->
    <div class="bottom-nav">
        <div class="d-flex">
            <a href="/dashboard" class="nav-item">
                <i class="fas fa-chart-line"></i>
                <span>资产</span>
            </a>
            <a href="/item/add" class="nav-item">
                <i class="fas fa-plus"></i>
                <span>添加</span>
            </a>
            <a href="/profile" class="nav-item">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </a>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        function deleteItem(itemId) {
            if (confirm('确定要删除这个物品吗？')) {
                fetch('/api/item/delete', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: 'id=' + itemId
                })
                .then(response => response.json())
                .then(data => {
                    if (data) {
                        location.reload();
                    } else {
                        alert('删除失败，请重试');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('删除失败，请重试');
                });
            }
        }
    </script>
</body>
</html>
